<template>
  <div class="project left">
    <el-row :gutter="20">
      <el-col class="el-col-pointer"
              :span="12"
              v-for="(l, index) in articlesList"
              :key="index"
              style="margin-bottom: 20px">
        <a :href="l.projectUrl"
           target="_blank"
           rel="noopener noreferrer">
          <el-card shadow="hover">
            <img :src="l.projectlog"
                 class="image">
            <div style="padding: 14px;">
              <h4>{{l.projectTitle}}</h4>
              <div class="content">{{l.projectDesc}}</div>
              <span>
                {{l.startTime}}--
              </span>
              <span>
               {{l.endTime}}
              </span>
            </div>
          </el-card>
        </a>
      </el-col>
    </el-row>
    <Loading v-if="isLoading"></Loading>
    <LoadEnd :msg="msg" v-if="isLoadEnd"></LoadEnd>
  </div>
</template>

<script>
import Loading from '../components/loading.vue'
import LoadEnd from '../components/loadEnd.vue'
import { getUserList } from '../api/api'
import {
  throttle,
  getScrollTop,
  getDocumentHeight,
  getWindowHeight,
  getQueryStringByName,
  timestampToTime
} from "../plugins/utils";
import axios from 'axios'
export default {
  data () {
    return {
      articlesList:[],
      tag_id:'',
      tag_name:'',
      pageNum:1,
      pageSize:10,
      isLoadEnd:false,
      isLoading:false,
      msg:""
    }
  },
  components:{
     Loading,
     LoadEnd,
     
  },
  mounted () {
      var that = this
      this.handleSearch();
   window.onscroll = () => {
      if (getScrollTop() + getWindowHeight() > getDocumentHeight() - 150) {
        // 如果不是已经没有数据了，都可以继续滚动加载
        if (this.isLoadEnd === false) {
          this.handleSearch();
        }
      }
    };
  },
  methods:{
    handleSearch(){
      var userId = this.getCookie('userID');
       this.isLoading = true;
        axios.post('api/project/',{pageNum:this.pageNum,pageSize:this.pageSize,userId:userId})
        .then(data => {
             if (data.data.length === 0 ) {
                this.msg='您还没有发表项目！'
                this.isLoadEnd = true;
                this.isLoading = false;
                document.removeEventListener("scroll", () => {});
                window.onscroll = null;
              }else{
                    console.log(data)
                    this.isLoading=false
                    this.articlesList = [...this.articlesList, ...data.data];
                    this.pageNum++;
                  
              }
        
        })
    }
  // 
  }
}
</script>

<style lang='less' scoped>
@import url("../less/index.less");
.project {
  overflow: hidden;
  padding: 40px 0;
  .el-col-pointer {
    cursor: pointer;
  }
  .content {
    height: 70px;
    text-overflow: ellipsis;
  }
  .image {
    width: 100%;
    height: 250px;
  }
}
</style>